自2020年以来，在疫情的影响下，越来越多的活动选择了线上进行。各式各样的微信小程序也出现在了我们生活的方方面面中。本篇将介绍使用微信小程序实现发起一个活动报名的设计，以此为基础，我们可以掌握微信小程序表单的基本用法，进而在诸如疫情信息登记、出入报备等场景中使用小程序进行开发，满足相关的需求。

设计如图 1所示的页面，实现输入活动名称、设定活动的开始/结束/报名截止时间、在地图上选择活动地点、输入活动简介和活动参与人数上限以及根据费用的情况来判断是否允许用户上传微信收款二维码。注意需要对输入的时间进行校验，以及给予必要的交互提示。

▍图1 发起新活动

本文以发起活动报名为示例场景，涉及小程序表单文本组件、选择器组件、地图组件的使用。同时要求对输入的数据进行合法性校验，又综合了小程序事件处理、选择渲染等内容。掌握此案例，可以较好地泛化学习其余表单的类似用法。

页面加载时，即会默认显示当前时间，以活动开始时间为例，页面的onLoad函数如下：

其中，util.formatDate()，util.formatTime()来自自定义的公共函数。主要功能是将Unix的时间戳格式化成标准的年月日时分秒的格式。

在前端以开始时间部分为例，代码如下：